<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>订单管理</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f8f9fa;
      padding: 20px;
    }

    .container {
      max-width: 960px;
      margin: auto;
    }

    .sidebar {
      margin-bottom: 30px;
    }

    .nav-link.active {
      background-color: #007bff;
      color: white !important;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="sidebar">
        <ul class="nav nav-pills flex-column mb-4">
          <li class="nav-item">
            <a class="nav-link" th:href="@{/courier/main}">我的信息</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" th:href="@{/courier/pending-orders}">需配送订单</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" th:href="@{/courier/total-orders}">总配送订单</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" th:href="@{/courier/order_management}">订单管理</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-9">
      <div class="card mb-4">
        <div class="card-header bg-primary text-white">
          <h1 class="card-title mb-0">订单管理</h1>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-striped mb-0">
              <thead class="table-light">
              <tr>
                <th>订单编号</th>
                <th>用户ID</th>
                <th>配送地址</th>
                <th>下单时间</th>
                <th>送达时间</th>
                <th>订单状态</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="order : ${orders}">
                <td th:text="${order.orderId}"></td>
                <td th:text="${order.userId}"></td>
                <td th:text="${order.address}"></td>
                <td th:text="${#temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                <td th:text="${order.completedAt != null ? #temporals.format(order.completedAt, 'yyyy-MM-dd HH:mm') : '-'}"></td>
                <td>
                  <span th:if="${order.deliveryStatus == 'in_transit'}">配送中</span>
                  <span th:if="${order.deliveryStatus == 'completed'}">已送达</span>
                  <span th:if="${order.deliveryStatus != 'in_transit' && order.deliveryStatus != 'completed'}" th:text="${order.deliveryStatus}"></span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入 Bootstrap JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>